<template>
	<view class="finance-page">
		<!-- 账户余额卡片 -->
		<view class="balance-card">
			<view class="balance-content">
				<view class="balance-info">
					<text class="balance-label">账户余额</text>
					<text class="balance-amount">¥{{ accountBalance }}</text>
					<view class="balance-stats">
						<view class="stat-item">
							<text class="stat-label">待结算</text>
							<text class="stat-value">¥{{ pendingAmount }}</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">可提现</text>
							<text class="stat-value">¥{{ withdrawableAmount }}</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">冻结中</text>
							<text class="stat-value">¥{{ frozenAmount }}</text>
						</view>
					</view>
				</view>
				<view class="balance-actions">
					<view class="action-btn primary" @click="handleWithdraw">
						<text class="btn-icon">💳</text>
						<text class="btn-text">提现</text>
					</view>
					<view class="action-btn secondary" @click="handleBill">
						<text class="btn-icon">📄</text>
						<text class="btn-text">账单</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 滚动内容区域 -->
		<scroll-view scroll-y class="scroll-content">
			<!-- 本月财务概览 -->
			<view class="section">
				<view class="section-title">
					<view class="title-dot"></view>
					<text class="title-text">本月财务概览</text>
				</view>
				<view class="stats-grid">
					<view class="stats-card green-card">
						<text class="card-icon">↓</text>
						<text class="card-label">收入</text>
						<text class="card-amount">¥{{ monthlyIncome }}</text>
						<text class="card-trend increase">↑ +12.5%</text>
					</view>
					<view class="stats-card red-card">
						<text class="card-icon">↑</text>
						<text class="card-label">支出</text>
						<text class="card-amount">¥{{ monthlyExpense }}</text>
						<text class="card-trend increase">↑ +5.2%</text>
					</view>
					<view class="stats-card blue-card">
						<text class="card-icon">%</text>
						<text class="card-label">平台佣金</text>
						<text class="card-amount">¥{{ platformCommission }}</text>
						<text class="card-trend">费率: 3%</text>
					</view>
					<view class="stats-card purple-card">
						<text class="card-icon">📈</text>
						<text class="card-label">净利润</text>
						<text class="card-amount">¥{{ netProfit }}</text>
						<text class="card-trend increase">↑ +15.8%</text>
					</view>
				</view>
			</view>

			<!-- 财务工具 -->
			<view class="section">
				<view class="section-title">
					<view class="title-dot"></view>
					<text class="title-text">财务工具</text>
				</view>
				<view class="tools-grid">
					<view class="tool-item" @click="handleTool('invoice')">
						<view class="tool-icon blue-bg">
							<text class="icon-text">📄</text>
						</view>
						<text class="tool-label">发票管理</text>
					</view>
					<view class="tool-item" @click="handleTool('deposit')">
						<view class="tool-icon green-bg">
							<text class="icon-text">💰</text>
						</view>
						<text class="tool-label">保证金</text>
					</view>
					<view class="tool-item" @click="handleTool('calculator')">
						<view class="tool-icon purple-bg">
							<text class="icon-text">🔢</text>
						</view>
						<text class="tool-label">费用计算</text>
					</view>
					<view class="tool-item" @click="handleTool('bank')">
						<view class="tool-icon orange-bg">
							<text class="icon-text">🏦</text>
						</view>
						<text class="tool-label">银行账户</text>
					</view>
					<view class="tool-item" @click="handleTool('statement')">
						<view class="tool-icon pink-bg">
							<text class="icon-text">🧾</text>
						</view>
						<text class="tool-label">对账单</text>
					</view>
					<view class="tool-item" @click="handleTool('report')">
						<view class="tool-icon indigo-bg">
							<text class="icon-text">📊</text>
						</view>
						<text class="tool-label">财务报表</text>
					</view>
				</view>
			</view>

			<!-- 最近交易 -->
			<view class="section">
				<view class="section-title">
					<view class="title-left">
						<view class="title-dot"></view>
						<text class="title-text">最近交易</text>
					</view>
					<text class="view-all" @click="viewAllTransactions">查看全部 ›</text>
				</view>
				<view class="transaction-list">
					<view class="transaction-item" v-for="(item, index) in transactions" :key="index" @click="viewTransactionDetail(item)">
						<view class="transaction-left">
							<view :class="['trans-icon', item.type + '-icon']">
								<text class="icon-text">{{ item.icon }}</text>
							</view>
							<view class="trans-info">
								<text class="trans-title">{{ item.title }}</text>
								<text class="trans-subtitle">{{ item.subtitle }}</text>
							</view>
						</view>
						<view class="transaction-right">
							<text :class="['trans-amount', item.type]">{{ item.amount }}</text>
							<text class="trans-time">{{ item.time }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 结算计划 -->
			<view class="section">
				<view class="section-title">
					<view class="title-dot"></view>
					<text class="title-text">结算计划</text>
				</view>
				<view class="settlement-card">
					<view class="settlement-info">
						<view class="settlement-left">
							<text class="settlement-label">下次结算日期</text>
							<text class="settlement-date">2025年1月15日</text>
						</view>
						<view class="settlement-right">
							<text class="settlement-label">预计到账</text>
							<text class="settlement-amount">¥{{ pendingAmount }}</text>
						</view>
					</view>
					<view class="settlement-note">
						<text class="note-text">结算周期: T+7 | 自动结算已开启</text>
					</view>
				</view>
			</view>

			<!-- 底部占位 -->
			<view class="bottom-space"></view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			accountBalance: '168,526.80',
			pendingAmount: '12,580',
			withdrawableAmount: '155,946',
			frozenAmount: '0',
			monthlyIncome: '286,580',
			monthlyExpense: '45,320',
			platformCommission: '8,597',
			netProfit: '232,663',
			transactions: [
				{
					type: 'income',
					icon: '↓',
					title: '订单收入',
					subtitle: '订单号: 202501050156',
					amount: '+¥1,298',
					time: '10:32'
				},
				{
					type: 'expense',
					icon: '↑',
					title: '平台佣金',
					subtitle: '费率: 3%',
					amount: '-¥38.94',
					time: '10:32'
				},
				{
					type: 'income',
					icon: '↓',
					title: '订单收入',
					subtitle: '订单号: 202501050155',
					amount: '+¥598',
					time: '09:45'
				},
				{
					type: 'withdraw',
					icon: '💳',
					title: '提现成功',
					subtitle: '到账: 工商银行尾号8866',
					amount: '¥10,000',
					time: '昨天'
				}
			]
		};
	},
	methods: {
		handleWithdraw() {
			uni.showToast({
				title: '跳转到提现页面',
				icon: 'none'
			});
		},
		handleBill() {
			uni.showToast({
				title: '跳转到账单页面',
				icon: 'none'
			});
		},
		handleTool(type) {
			uni.showToast({
				title: '功能开发中',
				icon: 'none'
			});
		},
		viewAllTransactions() {
			uni.showToast({
				title: '跳转到全部交易',
				icon: 'none'
			});
		},
		viewTransactionDetail(item) {
			uni.showToast({
				title: '查看交易详情',
				icon: 'none'
			});
		}
	}
};
</script>

<style scoped>
.finance-page {
	min-height: 100vh;
	background-color: #f3f4f6;
}

/* 账户余额卡片 */
.balance-card {
	background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
	padding: 24rpx;
}

.balance-content {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border-radius: 24rpx;
	padding: 32rpx;
}

.balance-info {
	color: #ffffff;
}

.balance-label {
	display: block;
	font-size: 28rpx;
	opacity: 0.8;
	margin-bottom: 16rpx;
}

.balance-amount {
	display: block;
	font-size: 72rpx;
	font-weight: bold;
	margin-bottom: 32rpx;
}

.balance-stats {
	display: flex;
	justify-content: space-between;
}

.stat-item {
	text-align: center;
	flex: 1;
}

.stat-label {
	display: block;
	font-size: 24rpx;
	opacity: 0.8;
	margin-bottom: 8rpx;
}

.stat-value {
	display: block;
	font-size: 36rpx;
	font-weight: 600;
}

.balance-actions {
	display: flex;
	gap: 16rpx;
	margin-top: 32rpx;
}

.action-btn {
	flex: 1;
	height: 80rpx;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
	font-size: 28rpx;
	font-weight: 500;
}

.action-btn.primary {
	background-color: #ffffff;
	color: #ec4899;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.action-btn.secondary {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

.btn-icon {
	font-size: 32rpx;
}

/* 滚动内容区域 */
.scroll-content {
	height: calc(100vh - 400rpx);
	padding-bottom: 40rpx;
}

/* 通用区块样式 */
.section {
	padding: 32rpx;
}

.section-title {
	display: flex;
	align-items: center;
	margin-bottom: 24rpx;
}

.title-left {
	display: flex;
	align-items: center;
	flex: 1;
}

.title-dot {
	width: 8rpx;
	height: 32rpx;
	background-color: #ec4899;
	border-radius: 8rpx;
	margin-right: 16rpx;
}

.title-text {
	font-size: 32rpx;
	font-weight: 600;
	color: #111827;
}

.view-all {
	font-size: 24rpx;
	color: #ec4899;
}

/* 财务概览 */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24rpx;
}

.stats-card {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 24rpx;
	border: 2rpx solid;
}

.stats-card.green-card {
	background-color: #f0fdf4;
	border-color: #bbf7d0;
}

.stats-card.red-card {
	background-color: #fef2f2;
	border-color: #fecaca;
}

.stats-card.blue-card {
	background-color: #eff6ff;
	border-color: #bfdbfe;
}

.stats-card.purple-card {
	background-color: #faf5ff;
	border-color: #e9d5ff;
}

.card-icon {
	display: block;
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 16rpx;
}

.green-card .card-icon {
	color: #16a34a;
}

.red-card .card-icon {
	color: #dc2626;
}

.blue-card .card-icon {
	color: #2563eb;
}

.purple-card .card-icon {
	color: #9333ea;
}

.card-label {
	display: block;
	font-size: 24rpx;
	color: #6b7280;
	margin-bottom: 8rpx;
}

.card-amount {
	display: block;
	font-size: 40rpx;
	font-weight: bold;
	color: #111827;
	margin-bottom: 8rpx;
}

.card-trend {
	display: block;
	font-size: 24rpx;
	color: #6b7280;
}

.card-trend.increase {
	color: #16a34a;
}

/* 财务工具 */
.tools-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24rpx;
}

.tool-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tool-icon {
	width: 112rpx;
	height: 112rpx;
	border-radius: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16rpx;
	box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
}

.tool-icon.blue-bg {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.tool-icon.green-bg {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.tool-icon.purple-bg {
	background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
}

.tool-icon.orange-bg {
	background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.tool-icon.pink-bg {
	background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

.tool-icon.indigo-bg {
	background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.icon-text {
	font-size: 40rpx;
}

.tool-label {
	font-size: 24rpx;
	color: #374151;
}

/* 最近交易 */
.transaction-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.transaction-item {
	background-color: #ffffff;
	border-radius: 16rpx;
	border: 2rpx solid #e5e7eb;
	padding: 24rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.transaction-left {
	display: flex;
	align-items: center;
	flex: 1;
}

.trans-icon {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 24rpx;
	font-size: 28rpx;
}

.trans-icon.income-icon {
	background-color: #dcfce7;
	color: #16a34a;
}

.trans-icon.expense-icon {
	background-color: #fee2e2;
	color: #dc2626;
}

.trans-icon.withdraw-icon {
	background-color: #dbeafe;
	color: #2563eb;
}

.trans-info {
	display: flex;
	flex-direction: column;
}

.trans-title {
	font-size: 28rpx;
	font-weight: 500;
	color: #111827;
	margin-bottom: 8rpx;
}

.trans-subtitle {
	font-size: 24rpx;
	color: #6b7280;
}

.transaction-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.trans-amount {
	font-size: 28rpx;
	font-weight: bold;
	margin-bottom: 8rpx;
}

.trans-amount.income {
	color: #16a34a;
}

.trans-amount.expense {
	color: #dc2626;
}

.trans-amount.withdraw {
	color: #2563eb;
}

.trans-time {
	font-size: 24rpx;
	color: #9ca3af;
}

/* 结算计划 */
.settlement-card {
	background: linear-gradient(135deg, #fce7f3 0%, #ffe4e6 100%);
	border-radius: 24rpx;
	padding: 32rpx;
	border: 2rpx solid #fbcfe8;
}

.settlement-info {
	display: flex;
	justify-content: space-between;
	margin-bottom: 24rpx;
}

.settlement-left,
.settlement-right {
	display: flex;
	flex-direction: column;
}

.settlement-right {
	align-items: flex-end;
}

.settlement-label {
	font-size: 28rpx;
	font-weight: 600;
	color: #111827;
	margin-bottom: 8rpx;
}

.settlement-date {
	font-size: 24rpx;
	color: #6b7280;
}

.settlement-amount {
	font-size: 36rpx;
	font-weight: bold;
	color: #ec4899;
}

.settlement-note {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 16rpx;
	text-align: center;
}

.note-text {
	font-size: 24rpx;
	color: #6b7280;
}

/* 底部占位 */
.bottom-space {
	height: 40rpx;
}
</style>
